<template>
  <div>
    <div class="back" @click="goBack">
    <svg t="1607171646247" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3151" width="20" height="20"><path d="M766.976 1021.952c-10.24 0-20.48-3.584-28.672-10.752L228.352 538.624c-15.872-14.336-15.872-38.4 0-52.736L738.304 13.312c15.872-14.336 40.96-14.336 56.832 0s15.872 38.4 0 52.736L313.856 512l481.28 445.952c15.872 14.336 15.872 38.4 0 52.736-7.68 7.168-17.92 11.264-28.16 11.264z" p-id="3152" fill="#2c2c2c"></path></svg>
    </div>
    <div class="newUser"><span>新用户注册</span></div>
    <div class="getLog">
      <el-form
        :model="registerForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <input
            placeholder="手机号"
            class="el-input__inner"
            type="text"
            v-model="registerForm.username"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item prop="username">
          <input
            placeholder="验证码"
            class="el-input__inner"
            type="text"
            v-model="registerForm.authCode"
            autocomplete="off"
          />
          <el-button @click="getAuthCode" round class="getAuth"
            >获取验证码</el-button
          >
        </el-form-item>
        <el-form-item prop="password">
          <input
            placeholder="密码"
            class="el-input__inner"
            type="password"
            v-model="registerForm.password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="submitRegForm(registerForm)" class="denglu"
            >注 册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import api from "../../api";
export default {
  name: "Register",
  data() {
    return {
      registerForm: {
        username: "",
        password: "",
        authCode: "",
      },
    };
  },
  methods: {
    //登录
    submitRegForm() {
      if (
        !(this.registerForm.username === "" &&
        this.registerForm.password === "")
      ) {
        api
          .getRegister({
            username: this.registerForm.username,
            password: this.registerForm.password,
          })
          .then((res) => {
            // console.log(res);
            if (res.status === 200) {
              // console.log( res.data.msg);
              this.$message({
                message: "注册成功",
                type: "success",
              });
              this.$router.push('/login')
            }
          });
      }else{
           this.$message({
                message: "用户名密码不能为空",
                type: "error",
              });
      }
    },
    getAuthCode() {},
    goBack(){
      this.$router.go(-1);//返回上一层
    }
  },
};
</script>

<style scoped>
.newUser {
margin-top: 72px;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.el-input__inner {
 width:238px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  /*outline: medium;*/
  background: #F7F7F7;
}
.getLog {
    height: 187px;
  margin-top: 48px;
  margin-left:-23px;
  position: relative;
}
.denglu {
   width: 242px;
    height: 43px;
    background-color:#F7F7F7 ;
}
input::-webkit-input-placeholder {
  color: #4e4e4e;
}

.getAuth {
   position: absolute;
  top: 0;
  right: 51px;
  background-color:#F7F7F7 ;
}
.back{
  position: absolute;
  top: 30px;
  left: 30px;

}
</style>